<template>
  <div class="crm-title-bar">
    <i class="color-horiz-bar" :style="indicatorStyle" :class="barStyleName"></i>
    <h3 class="crm-title-text">{{ barTitle }}</h3>
    <router-link
      v-if="more"
      class="crm-title-text more"
      :to="to">
        <slot name="right">
          <img class="nav-arrow" src="//fin.91mycloud.com/arrow-go-grey.png" />
        </slot>
      </router-link>
  </div>
</template>


<script>
  export default{

    props:{
      barStyleName : {//颜色条的类名
        type: String,
        default : 'default'//默认的类名如 class="color-horiz-bar defaut",该值有传参barStyleName决定
      },

      barTitle : {
        type: String,
        default: '标题条名称'
      },

      more : {
        type: Boolean,
        default: false
      },

      morePath : {
        type: String,
        default: ''
      },
      link: {
        type: Object,
      },
      indicatorStyle: {
        type: Object
      }
    },
    data () {
      return {
        to: {}
      }
    },
    watch: {
      link () {
        this.to = this.link
      }
    },
    components: {

    },
    beforeMount () {
      if (this.link) {
        this.to = this.link
      } else {
        this.to = {path: this.morePath }
      }
    }
  }
</script>


<style lang="less">//使用less预编译语言

  @import "../less/base";

  .crm-title-bar{

    &:extend(.clearfix all);//继承清除浮动

    @barHeight : 30px;

    padding-top: 10px;
    border-bottom: 1px solid #EDEDED;
    height:@barHeight;


    &>*{
      float: left;
    }

    .color-horiz-bar{

      height: inherit;
      width: 10px;

      &.default {//&相当于.color-horiz-bar.default
        background-color: rgb(241,206,29);
      }

      &.green {//&相当于.color-horiz-bar.default
        background-color: #a6e19d;
      }

      &.brown {
        background-color: #986515;
      }

      &.light-red {
        background-color: #e45454;
      }

      &.blue {
        background-color: #70c9f4;
      }
    }

    .crm-title-text{
      height: inherit;
      line-height: @barHeight;
      padding-left: 6px;
      font-size: 14px;
      font-weight: normal;
    }

    .more{
      color: #20a0ff;
      float: right;
      margin-right: 2px;
      padding-right: 10px;
    }

    .nav-arrow {
      margin-top: 6px;
      height: 18px;
    }
  }
</style>
